//导入组件
import { createRouter, createWebHistory } from 'vue-router'
import Login from "@/views/Login.vue";//立即加载

//创建Router实例
const router = createRouter({
  //HTML5
  history: createWebHistory(import.meta.env.BASE_URL),//导入指定的环境
  //路由，是一个数组，而且可以嵌套=>嵌套路由
  routes: [
    {
      path: '/login',//url
      name: 'login',//路由名称
      component: Login //组件
    },
    {
      path: '/home',
      name: 'home',
      component: () => import('../views/Home.vue'),//懒加载
      //子路由
      children:[
        {
          path: 'product',  // /home/product
          name: 'product',
          component: () => import('../components/home/Product.vue'),
        },
        {
          path: 'user',
          name: 'user',
          component: () => import('../components/home/User.vue'),
        },
          //商品详情组件
        {
          path: 'productDetail',
          name: 'productDetail',
          component: () => import('../components/home/ProductDetail.vue'),
        },
        {
          path: 'userDetail/:id', //使用 ../userDetail/1009      id是占位符，这里就是 id=1009
          name: 'userDetail',
          props: true, //设置为true，为了与this.$route解耦
          component: () => import('../components/home/UserDetail.vue')
        },
          //测试组件页面
        {
          path: 'test',
          name: 'testAxios',
          component: () => import('../components/home/TestAxios.vue'),
        },
      ]
    },
    {
      path: '/',
      redirect: '/home' //重定向
    },
    /*{
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue'),
    },*/
  ],
})
//全局守卫
router.beforeEach((to, from) => {

  console.log(to.path)
  console.log(from.path)
  if (to.path!=='/login'){
    //判断你是否带token
    //校验访问者的角色和权限
    //如果不满足，就返回false，取消导航
    return false;
  }
  // ...
  // 返回 false 以取消导航
  return true
})

//导出这个路由实例
export default router
